<template>
	<view>
		<view class="content map">
			<map
				:latitude="lat"
				:longitude="lng"
				:markers="markers"
				@markertap="markerItemClick($event)"
				style="width: 100%; height: 100vh;">
				<!-- <cover-view slot="callout">
					<block v-for="(item, index) in markers" :key="index">
						<cover-view class="custom-callout" :marker-id="item.id">
							<cover-image class="icon" :src="item.iconPath"></cover-image>
							<cover-view class="text">
								<text class="title">{{ item.title }}</text>
								<text class="content">{{item?.addrDetail || item?.addr}}</text>
							</cover-view>
						</cover-view>
					</block>
				</cover-view> -->
			</map>
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { tab, auth, modal } from "@/plugins"
import { getTitle } from "@/utils/getter"
import { checkPermi, checkRole, checkOnlyPermi, checkOnlyRole } from "@/utils/permission"
import { salesmanClue } from "@/api/erp_api/sale"
import useUserStore from '@/store/modules/user'
import useSetStore from '@/store/modules/set'
import { sleep } from 'uview-plus'

	const userStore = useUserStore()
	const setStore = useSetStore()
	onLoad( (option) => {
		lat.value = option?.lat
		lng.value = option?.lng
		if (setStore.salesmanClueParams?.pageNum) {
			getDetail(setStore.salesmanClueParams)
		}
	})
	
	// 数据查询
	const lat = ref('')
	const lng = ref('')
	const markers = ref([])
	const pageNum = ref(1)
	const pageSize = ref(20)
	const tableList = ref([])
	
	const getDetail = (params) => {
		if (params.nearby) {
			params.lng = lng.value
			params.lat = lat.value
		} else {
			params.lng = ''
			params.lat = ''
		}
		params.pageNum = pageNum.value
		params.pageSize = pageSize.value
			// console.log(params)
		salesmanClue(params).then(async res => {
			tableList.value = res.rows || []
			const list = res.rows.map(item => {
				return {
					id: item.id,
					latitude: item.lat,
					longitude: item.lng,
					// #ifndef APP-IOS
					iconPath: '/static/images/locaton4.png',
					width: 48,
					height: 48,
					// #endif
					// #ifdef APP-IOS
					iconPath: '/static/images/locaton2.png',
					width: 20,
					height: 20,
					// #endif
					title: item?.storeName || item?.customerName || '',
					label: {
						content: item?.storeName || item?.customerName || ''
					},
					callout: {
						display: 'BYCLICK',
						content: `${item?.storeName? '店铺：'+item.storeName+'；' : ''}电话：${item?.phone || '无'}；地址：${item?.addrDetail || item?.addr}`
					}
				}
			}) || []
			markers.value = markers.value.concat(list.filter(item => item.latitude && item.longitude))
			if (list.length === pageSize.value) {
				await sleep(100)
				pageNum.value += 1
				getDetail(params)
			} else {
				// console.log(markers.value)
			}
    })
	}
	const markerItemClick = (e) => {
		// console.log('点击了标记点:', e.detail)
	}
</script>

<style scoped lang="scss">
	// .custom-callout {
	//   width: 200rpx;
	//   padding: 10rpx;
	//   background-color: #ffffff;
	//   border-radius: 10rpx;
	//   box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
	// }
	// .icon {
	//   width: 40rpx;
	//   height: 40rpx;
	//   border-radius: 50%;
	// }
	// .text {
	//   margin-top: 10rpx;
	// }
	// .title {
	//   font-size: 16rpx;
	//   font-weight: bold;
	// }
	// .content {
	//   font-size: 14rpx;
	//   color: #666;
	// }
	// .custom-callout {
	// 	width: 100rpx;
	// 	height: auto;
	// }
</style>
